<template>
	<div class="bg-white">
		<div class="shadow rounded overflow-hidden">
			<div class="bg-main p-2">
				<span>会员类型信息</span>
			</div>
			<div  class="position-relative">
				<div style="background-color: rgba(255,255,255, 0.6);" class="w-100 h-100">
					<Row class="">
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">会员类型名称</div>
							<div>{{hylx.hlname}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-f-fuguang rounded  p-2">
							<div class="text-xs">教练</div>
							<div class="p-2 d-flex">
								<div class="w-25 position-relative">
									<div class="padding-top-100">
									</div>
									<img class="w-100 h-100 position-absolute top0 rounded-circle" :src="jiaolian.cover"/>
								</div>
								<div class="w-75">
									<div class="px-3">{{jiaolian.jlname}}</div>
									<div class="px-3">{{jiaolian.tel}}</div>
								</div>
								
							</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="d-flex justify-content-between bg-qingbai rounded  p-2">
							<div class="text-xs">会员人数</div>
							<div>{{hyjl.length}}人</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="d-flex justify-content-between bg-qingbai rounded  p-2">
							<div class="text-xs">金额</div>
							<div>￥{{hylx.amount / 100}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="d-flex justify-content-between bg-qingbai rounded  p-2">
							<div class="text-xs">周期</div>
							<div>{{hylx.zq}}天</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="d-flex justify-content-between bg-qingbai rounded  p-2">
							<div class="text-xs">次数</div>
							<div>{{hylx.cs}}次</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
							<div class="d-flex justify-content-between bg-danfen rounded  p-2">
								<span>状态：</span>
								<span v-if="hylx.flg">上架</span>
								<span v-else>下架</span>
							</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="d-flex justify-content-between bg-danfen rounded  p-2">
							<span>用户状态：</span>
							<span v-if="hylx.stu">启用</span>
							<span v-else>禁用</span>
						</div>
						</Col>
					</Row>
				</div>
			</div>
		</div>
		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>会员信息</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(hy,index) in hyjl" :key="index"
					class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="shadow rounded p-2">
						<div class="d-flex justify-content-between">
							<span>姓名</span>
							<span>{{hy.khnc}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>购买日期</span>
							<span>{{hy.cd}}</span>
						</div>
						
					</div>
					</Col>
				</Row>
			</div>
		</div>
</div>	
</template>
	
							

<script>
	export default {
		data() {
			return {
				hylx: {},
				jiaolian:{},
				hyjl:{}
			}
		},
		created: function() {
			this.hylx.hylxid = this.$route.query.id;
			this.loadData();
		},
		mounted: function() {},
		methods: {
			loadData: function() {
				return this.http.get({
					url: "/client/hylx/info",
					param: {
						hylxid: this.hylx.hylxid
					}
				}).then(res => {
					console.log("jiezhi",res)
					this.hylx = res.ahylx;
					this.jiaolian = res.ajiaolian;
					this.hyjl = res.ahyjl;
				});
			},
			
		},
	}
</script>

<style>
</style>